<template>
	<!-- <div :class="['ui-checkbox', { active: state, disabled }]" @click="changeHandler"></div> -->
    <div @click="changeHandler">
        <img v-if="!disabled" src="/static/images/components/icon_checkbox.png" alt="">
        <img v-else src="/static/images/components/icon_checkbox_active.png" alt="">
    </div>
</template>

<script>
	export default {
		name: 'CheckBox',
		components: {},
		props: {
			disabled: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
			}
		},
		methods: {
			changeHandler() {
				if (this.disabled) {
                    this.disabled = false
                    this.$emit('input', this.disabled);
				}else{
                    this.disabled = true
                    this.$emit('input', this.disabled);
                }
			}
		},
		watch:{
			value(e){
				console.log(e)
				this.state = e
			}
		},
		beforeMount() {
			this.state = this.value
		},
	}
</script>

<style lang="scss" scoped>
	img {
		width: 32rpx;
		height: 32rpx;
        margin-top:10rpx;
	}
</style>
